<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>初识vue</title>
</head>
<body>
    <div id="root">
        <!-- 
            data 与 el 两种写法 
            1. el 有两种写法
                (1).new Vue({el:"#root"})的时候配置el属性，会自动将模板渲染到el指定的元素中
                (2).先创建Vue实例，随后通过vm.$mount("#root")的时候手动将模板渲染到el指定的元素中
            2. data 有两种写法
                (1).对象式
                new Vue({data:{name:"Vue"}})的时候配置data属性，会自动将data中的数据绑定到模板中
                (2).函数式
                如何选择:目前哪种写法都可以，以后学习组件时，data必须使用函数式，否则会报错
            3.一个重要的原则
                由Vue管理的函数，一般不要写箭头函数，一旦写了箭头函数，this就不会指向Vue实例，导致一些问题，this就是window对象了
         -->
        <h1>你好{{name}}</h1>
    </div>
</body>
<script>
    Vue.config.productionTip=false;
    const vm = new Vue({
        //第一种挂载el写法
        el: "#root",
        // 第一种data写法
        // data:{
        //     name: "Vue"
        // }
        //第二种data写法
        data: function() {
            console.log("此处的this对象是Vue对象", this);
            return {
                name: "Vue"
            }
        }
    });
    //vm对象中带$符号的方法是个程序员用的，不带$符号的方法是vue自己用的
    // console.log(vm);
    // 第二种挂载el写法
    // setTimeout(()=>{
    //     vm.$mount("#root");
    // },1000);
    
</script>
</html>